<script>
import { provide, toRefs } from 'vue-demi'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String
    }
  },
  emits: ['update:modelValue', 'tab-click'],
  setup(props, { emit }) {
    const handleClick = (name, index) => {
      // 内部控制外部的 modelValue 对应的值，activeName
      emit('update:modelValue', name)
      emit('tab-click', { name, index })
    }
    // 提供 activeName 到此组件所有的后代
    // 丢失响应式的两种情况
    // props.modelValue
    // const { modelValue } = props
    // !把 props 里面的所有属性变成单独的响应式的 ref
    const { modelValue } = toRefs(props)
    provide('activeName', modelValue)
    return { handleClick }
  },
  render() {
    const arr = this.$slots.default()
    // 面板
    const panels = []
    arr.forEach((item) => {
      // 正常使用的
      if (item.type.name === 'XtxTabsPanel') {
        panels.push(item)
      } else {
        // 通过 for 循环生成的 <XtxTabsPanel/>
        if (Array.isArray(item.children)) {
          item.children.forEach((item) => {
            if (item.type.name === 'XtxTabsPanel') {
              panels.push(item)
            }
          })
        }
      }
    })

    // 根据面板的数据动态生成标题
    const navs = (
      <nav>
        {panels.map((item, index) => (
          <a
            href="javascript:;"
            key={item.props.name}
            class={{
              active: this.modelValue === item.props.name
            }}
            onClick={() => this.handleClick(item.props.name, index)}
          >
            {item.props.label}
          </a>
        ))}
      </nav>
    )
    return <div class="xtx-tabs">{[navs, panels]}</div>
  }
}
</script>
<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
